<template>
  <div style="display: flex; flex-direction: column; width: 100%;">
    <div
         style="height: 95%;
         width: 101%;
         /*border: 1px solid blue;*/
         padding-left: 30px;
         overflow-y: auto;
         box-sizing: border-box;
         margin-top: 10px">
      <!--       显示响应结果-->
      <div
           ref="scrollBox"
           style="overflow-y: auto;display: flex;flex-direction:column;
           /*border: 1px solid blue;*/
         height: 100%;width: 100%;">
        <div v-for="(item,index) in data.contentsData" :key="index">
          <pre v-if="item.senderId === data.robotId" style="display: flex;flex-direction: row;margin: 5px 0">
            <el-avatar style="" :src="data.robotAvatar"/>
            <div style="background-color: #f3f5fc;
                  border-radius: 5px;padding: 10px;
                  margin-left: 5px;max-width: 88%;">{{ item.content }}</div>
          </pre>
          <pre v-else style="display: flex;flex-direction: row;justify-content: flex-end;margin: 5px 0">
                  <div style="background-color: #f3f5fc;
                  border-radius: 5px;padding: 10px;
                  margin-right: 5px;max-width: 88%;">{{ item.content }}</div>
            <el-avatar style="margin: 0 30px 0 0" :src="Data.avatar"/>
          </pre>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import {onMounted, onUpdated, reactive, ref} from 'vue';
import request from "../utils/request.js";
import {useRoute} from "vue-router";

const route = useRoute();

const dataString = localStorage.getItem('data');
// 通过JSON.parse转换字符串为对象
const userData = dataString ? JSON.parse(dataString) : null;
console.log("用户信息：", userData)


let loadingInstance = null;


const scrollBox = ref(null);

const Data = reactive({
  avatar:null,
})


onUpdated(() => {
  // 确保添加内容后视图滚动到底部
  if (scrollBox.value) {
    scrollBox.value.scrollTop = scrollBox.value.scrollHeight;
  }
});

onMounted(() => {
  // 使用队列微任务确保DOM已更新
  queueMicrotask(() => {
    // 确保scrollBox被引用并且现在已经存在DOM中
    if (scrollBox.value) {
      // 将滚动条设置到最底部
      scrollBox.value.scrollTop = scrollBox.value.scrollHeight;
    }
  });
});

const data = reactive({
  contentsData: null,
  currentConversationId: route.query.ConversationId,
  preDeleteHistoricalConversationId: null,//删除的前一个历史会话ID
  robotAvatar: null,
  robotId: null,
})

const LoadAvatar = () => {
  request.get(`/java/conversation/getAvatar?currentConversationId=${data.currentConversationId}`).then((res)=>{
    console.log("加载当前会话用户头像",res)
    Data.avatar = res.data
  })
}

const Load = () => {
  request.get(`/user/getRobot`).then((res) => {
    console.log("机器人：", res)
    data.robotAvatar = res.data.avatar
    data.robotId = res.data.userId;
    LoadAvatar();
  })


  request.get(`/java/content/getContent/${data.currentConversationId}`).then((res) => {
    data.contentsData = res.data;
  })
}


Load();





</script>


<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>